{{extend genshinLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}html/player/role-card.css"/>
<link rel="preload" href="https://q1.qlogo.cn/g?b=qq&s=0&nk={{user_id}}" as="image">
{{/block}}

{{block 'main'}}
<div class="info-box">
  <div class="head-box">
    <div class="avatar">
      <img src="https://q1.qlogo.cn/g?b=qq&s=0&nk={{user_id}}" onerror="whenError(this)"/>
    </div>
    <div class="name">
      <div>{{name}}</div>
    </div>
    <div class="uid">
      <div>UID：{{uid}}</div>
    </div>
    <div class="genshin">
      <img class="genshin-img" src="{{_res_path}}img/other/原神.png"/>
    </div>
  </div>
  <div class="tab">数据总览</div>
  <div class="data-box">
    {{each line val}}
    <div class="data-line">
      {{each val item}}
      <div class="data-line-item">
        <div class="num">{{item.num}}</div>
        <div class="lable">{{item.lable}}</div>
      </div>
      {{/each}}
    </div>
    {{/each}}
  </div>
</div>
<div class="list-box">
  <div class="list">
    {{each avatars val}}
    <div class="item">
      <div class="item-bg">
        <div class="role-box {{val.element}}">
          <img class="role" src="{{_miao_path}}{{val.img}}"/>
        </div>
        {{ if val.actived_constellation_num>0}}
        <div class="role-life life{{val.actived_constellation_num}}">{{val.actived_constellation_num}}命</div>
        {{/if}}
        <div class="role-lv">
          <div class="text">Lv {{val.level}}</div>
          <div class="text-bg"></div>
        </div>
      </div>
    </div>
    {{/each}}
  </div>
</div>
{{/block}}
